import React, {Fragment, useEffect, useMemo, useRef} from 'react';
import { observer } from "mobx-react-lite";

import { CEType, Viewer, CesiumType, CesiumUtil } from "vendor/components/pro-cesium";
import { type Earth3dVisProps } from "@/components/app/earth3dVis";
import { animation, onlineMap, offlineMap, mapEffect, vector } from "./demo";

import {
    load3dTile,
    loadCzmlLayer,
    loadDynamicLayer,
    loadGeoJsonLayer,
    loadHTMLLayer
} from "./demo/vector";

const Demo: React.FC = () => {
    const { onMounted } = useCesium3D();
    return <div />
}

export default observer(Demo);

export const onMapDidMount: Earth3dVisProps["onMapDidMount"] = (gisMapStore) => {
    const { cesiumUtil} = gisMapStore;
    const { CE } = cesiumUtil;
    const viewer = cesiumUtil.viewer;
    const mouse = cesiumUtil.mouse;

    viewer.setOptions({
        enableFxaa: true,   // 抗锯齿
    });

    // 加载场景组件
    loadSceneComponents(viewer);

    const { Cesium } = CE.Namespace;


    // setTimeout(() => dispose(), 3000)

    // viewer.imageryLayers.addImageryProvider(utProvider);

    // 一、影像
    // imagery.addAmap(CE,viewer)
    // imagery.addSingleTileImage(CE,viewer)

    // 二、地形
    // terrain.addUrlTerrain(CE, viewer);

    // 三、Layer
    // layerOfCE.addTilesetLayer(CE, viewer);
    // layerOfCE.addGeoJsonLayer(CE, viewer);

    // ***************在线地图******************
    // 1. google地图
    // onlineMap.loadGoogle(CE, viewer);

    // 2. 加载xyz瓦片坐标信息
    // onlineMap.loadXYZCoordinates(CE, viewer);

    // 3. 加载天地图
    // onlineMap.loadTianDiTu(CE, viewer)

    // 4. 加载百度地图
    // onlineMap.loadBaiDu(CE, viewer)

    // 5. 加载百度地图(无偏移)
    // onlineMap.loadBaiDuNoDeviation(CE, viewer)

    // 6. 高德地图
    // onlineMap.loadGaoDe(CE, viewer)

    // 7. 高德地图(无偏移)
    // onlineMap.loadGaoDeNoDeviation(CE, viewer)

    // 8. 腾讯地图
    // onlineMap.loadTencent(CE, viewer)

    // 9. ArcGis地图
    // onlineMap.loadArcGis(CE, viewer)

    // ***************离线地图******************
    // 1. 影像图
    // offlineMap.loadImageMap(CE, viewer);

    // 2. 单图片
    // offlineMap.loadImageMap1(CE, viewer);

    // 3. 单图片(夜晚)
    // offlineMap.loadImageMap2(CE, viewer);

    // 4. 单图片(蓝色)
    // offlineMap.loadImageMap3(CE, viewer);

    // ***************地图效果******************
    // 1. 双图对比
    // mapEffect.doubleContrast(CE, viewer);

    // 2. 地图滤镜
    // mapEffect.mapFilter(CE, viewer);

    // 3. 地形图
    // mapEffect.mapTerrain(CE, viewer);

    // ***************矢量数据******************
    // 1. 矢量图层
    // vector.loadVectorLayer(CE, viewer);

    // 2.聚合(默认样式)
    // vector.loadPolymerization1(CE, viewer)

    // 3.聚合(聚合样式)
    // vector.loadPolymerization2(CE, viewer)

    // 4. 3DTiles图层
    // vector.load3dTile(CE, viewer)

    // 5. geoJSON图层
    // vector.loadGeoJsonLayer(CE, viewer)

    // 6. html图层
    // vector.loadHTMLLayer(CE, viewer)

    // 7. 动态图层
    // vector.loadDynamicLayer(CE, viewer)

    // 8. CZML图层
    // vector.loadCzmlLayer(CE, viewer)


    // ***************场景动画******************
    // 1. 渲染雷达和扫描圈扫描
    // animation.renderRadarAndCircleScan(CE, viewer);

    // 2. 开场动画
    // animation.openingAnimation(CE,viewer);

    // 3. 地球自旋转
    // animation.globeRotate(CE,viewer);

    // 4. 定点巡航
    // animation.doFlying(CE, viewer);

    // 5. 绕地环绕
    // animation.doAroundView(CE, viewer);

    // 6. 绕点环绕
    // animation.doAroundPoint(CE, viewer);

    // ***************天气效果******************
    // 1. 雨天效果
    // viewer.weather.rain.enable = true;

    // 2. 雪天效果
    // viewer.weather.snow.enable = true;

    // 3. 云效果
    // viewer.weather.cloud.enable = true;

    // 4. 雾效果(需要给颜色添加透明度)
    // viewer.weather.fog.enable = true;


    // *********************鼠标绘制点线面*************************
    // 绘制矩形
    // mouse.rectangle().then(({entity, coordinates}) => {
    //     console.log("rectangle->entity->",entity)
    //     console.log("rectangle->coordinates->",coordinates)
    // })

    // // 绘制多边形
    // mouse.polygon().then(({entity, coordinates}) => {
    //     console.log("polygon->entity->", entity)
    //     console.log("polygon->coordinates->", coordinates)
    // })

    // // 绘制折线
    // mouse.polyline().then(({entity, coordinates}) => {
    //     console.log("polyline->entity->", entity)
    //     console.log("polyline->coordinates->", coordinates)
    // })

    // // 绘制圆
    // mouse.circle().then(({entity, center, radius}) => {
    //     console.log("circle->center->", center)
    //     console.log("circle->radius->", radius)
    // })


    // // 绘制点
    // mouse.point().then(({entity, center}) => {
    //     console.log("point->center->", center)
    // })

    // // 绘制标记点
    // mouse.marker().then(({entity, center}) => {
    //     console.log("marker->center->", center)
    // })


    // 测距
    // mouse.measure.drawLine({ line:{clampToGround: false}, callback: () => { } })
    // mouse.measure.drawArea({ line:{clampToGround: false}, callback: () => { } })
}

// 加载场景组件
const loadSceneComponents = (viewer: Viewer) => {
    // 罗盘
    viewer.compass.enable = true;

    // 放大缩小
    viewer.zoomController.enable = true;

    // 比例尺
    viewer.distanceLegend.enable = true;

    // 位置信息
    viewer.locationBar.enable = true;

    // 蒙层
    // viewer.loadingMask.enable = true;

    // 鹰眼地图
    // viewer.hawkeyeMap.enable = true;
}

// 影像图层
const imagery = {
    // 高德卫星地图
    addAmap: (CE: CEType, viewer: Viewer) => {
        const baseLayer = CE.ImageryLayerFactory.createAmapImageryLayer({
            style:'img',
            crs:"WGS84"
        })
        viewer.addBaseLayer(baseLayer)
    },
    // 单一图片
    addSingleTileImage: (CE: CEType, viewer: Viewer) => {
        const baselayer = CE.ImageryLayerFactory.createSingleTileImageryLayer({
            url: require("./img/tile/world_n.jpg").default,
        })
        viewer.addBaseLayer(baselayer)
    },
}

// 地形
const terrain = {
    // 添加url地形
    addUrlTerrain: (CE: CEType, viewer: Viewer) => {
        // 添加影像图层
        imagery.addAmap(CE, viewer);

        // TODO 注意：地形是透明的，需要加上影像图层才能显示出来
        const terrain = CE.TerrainFactory.createUrlTerrain({
            url: "https://data.marsgis.cn/terrain",
        })
        viewer.addTerrain(terrain);
        viewer.flyToPosition(
            new CE.Position(
                96.70456483909693,
                28.883444927447762,
                48977.26981733466,
                0,
                -31
            )
        )
    },
}

// layer, 图层
const layerOfCE = {
    addTilesetLayer: (CE: CEType, viewer: Viewer) =>{
        imagery.addAmap(CE, viewer);

        // @ts-ignore
        let layer = new CE.TilesetLayer('layer')
        viewer.addLayer(layer)
        // @ts-ignore
        const tileset = new CE.Tileset(
            '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
        )
        tileset.setHeight(-420)
        layer.addOverlay(tileset)
        // @ts-ignore
        viewer.flyTo(tileset)
    },
    addGeoJsonLayer: (CE: CEType, viewer: Viewer) => {
        imagery.addAmap(CE, viewer);

        // @ts-ignore
        let layer = new CE.GeoJsonLayer(
            'layer',
            'https://dc.dvgis.cn/examples/data/simplestyles.geojson'
        )
        viewer.addLayer(layer)
        // @ts-ignore
        viewer.flyTo(layer)
    }
}


const useCesium3D = () => {
    // const gisMapStore = useMemo(() => new GisMapStore(), []);
    const onMounted = (params:{CE: CEType,  cesiumUtil: CesiumUtil}) => {
        const {CE, cesiumUtil} = params;
        // gisMapStore.setCesiumUtil(cesiumUtil);
        const viewer = cesiumUtil.viewer;
        const mouse = cesiumUtil.mouse;

        viewer.setOptions({
            enableFxaa: true,   // 抗锯齿
        });

        // 加载场景组件
        loadSceneComponents(viewer);
        // console.log("CE->")
        // // @ts-ignore
        // window.CE = CE

        // 一、影像
        // imagery.addAmap(CE,viewer)
        // imagery.addSingleTileImage(CE,viewer)

        // 二、地形
        // terrain.addUrlTerrain(CE, viewer);

        // 三、Layer
        // layerOfCE.addTilesetLayer(CE, viewer);
        // layerOfCE.addGeoJsonLayer(CE, viewer);

        // ***************在线地图******************
        // 1. google地图
        // onlineMap.loadGoogle(CE, viewer);

        // 2. 加载xyz瓦片坐标信息
        // onlineMap.loadXYZCoordinates(CE, viewer);

        // 3. 加载天地图
        // onlineMap.loadTianDiTu(CE, viewer)

        // 4. 加载百度地图
        // onlineMap.loadBaiDu(CE, viewer)

        // 5. 加载百度地图(无偏移)
        // onlineMap.loadBaiDuNoDeviation(CE, viewer)

        // 6. 高德地图
        onlineMap.loadGaoDe(CE, viewer)

        // 7. 高德地图(无偏移)
        // onlineMap.loadGaoDeNoDeviation(CE, viewer)

        // 8. 腾讯地图
        // onlineMap.loadTencent(CE, viewer)

        // 9. ArcGis地图
        // onlineMap.loadArcGis(CE, viewer)

        // ***************离线地图******************
        // 1. 影像图
        // offlineMap.loadImageMap(CE, viewer);

        // 2. 单图片
        // offlineMap.loadImageMap1(CE, viewer);

        // 3. 单图片(夜晚)
        // offlineMap.loadImageMap2(CE, viewer);

        // 4. 单图片(蓝色)
        // offlineMap.loadImageMap3(CE, viewer);

        // ***************地图效果******************
        // 1. 双图对比
        // mapEffect.doubleContrast(CE, viewer);

        // 2. 地图滤镜
        // mapEffect.mapFilter(CE, viewer);

        // 3. 地形图
        // mapEffect.mapTerrain(CE, viewer);

        // ***************矢量数据******************
        // 1. 矢量图层
        // vector.loadVectorLayer(CE, viewer);

        // 2.聚合(默认样式)
        // vector.loadPolymerization1(CE, viewer)

        // 3.聚合(聚合样式)
        // vector.loadPolymerization2(CE, viewer)

        // 4. 3DTiles图层
        // vector.load3dTile(CE, viewer)

        // 5. geoJSON图层
        // vector.loadGeoJsonLayer(CE, viewer)

        // 6. html图层
        // vector.loadHTMLLayer(CE, viewer)

        // 7. 动态图层
        // vector.loadDynamicLayer(CE, viewer)

        // 8. CZML图层
        // vector.loadCzmlLayer(CE, viewer)


        // ***************场景动画******************
        // 1. 渲染雷达和扫描圈扫描
        animation.renderRadarAndCircleScan(CE, viewer);

        // 2. 开场动画
        // animation.openingAnimation(CE,viewer);

        // 3. 地球自旋转
        // animation.globeRotate(CE,viewer);

        // 4. 定点巡航
        // animation.doFlying(CE, viewer);

        // 5. 绕地环绕
        // animation.doAroundView(CE, viewer);

        // 6. 绕点环绕
        // animation.doAroundPoint(CE, viewer);

        // ***************天气效果******************
        // 1. 雨天效果
        // viewer.weather.rain.enable = true;

        // 2. 雪天效果
        // viewer.weather.snow.enable = true;

        // 3. 云效果
        // viewer.weather.cloud.enable = true;

        // 4. 雾效果(需要给颜色添加透明度)
        // viewer.weather.fog.enable = true;


        // *********************鼠标绘制点线面*************************
        // 绘制矩形
        // mouse.rectangle().then(({entity, coordinates}) => {
        //     console.log("rectangle->entity->",entity)
        //     console.log("rectangle->coordinates->",coordinates)
        // })

        // // 绘制多边形
        // mouse.polygon().then(({entity, coordinates}) => {
        //     console.log("polygon->entity->", entity)
        //     console.log("polygon->coordinates->", coordinates)
        // })

        // // 绘制折线
        // mouse.polyline().then(({entity, coordinates}) => {
        //     console.log("polyline->entity->", entity)
        //     console.log("polyline->coordinates->", coordinates)
        // })

        // // 绘制圆
        // mouse.circle().then(({entity, center, radius}) => {
        //     console.log("circle->center->", center)
        //     console.log("circle->radius->", radius)
        // })


        // // 绘制点
        // mouse.point().then(({entity, center}) => {
        //     console.log("point->center->", center)
        // })

        // // 绘制标记点
        // mouse.marker().then(({entity, center}) => {
        //     console.log("marker->center->", center)
        // })


        // 测距
        // mouse.measure.drawLine({ line:{clampToGround: false}, callback: () => { } })
        // mouse.measure.drawArea({ line:{clampToGround: false}, callback: () => { } })
    }

    // 加载场景组件
    const loadSceneComponents = (viewer: Viewer) => {
        // 罗盘
        viewer.compass.enable = true;

        // 放大缩小
        viewer.zoomController.enable = true;

        // 比例尺
        viewer.distanceLegend.enable = true;

        // 位置信息
        viewer.locationBar.enable = true;

        // 蒙层
        // viewer.loadingMask.enable = true;

        // 鹰眼地图
        // viewer.hawkeyeMap.enable = true;
    }

    // 影像图层
    const imagery = {
        // 高德卫星地图
        addAmap: (CE: CEType, viewer: Viewer) => {
            const baseLayer = CE.ImageryLayerFactory.createAmapImageryLayer({
                style:'img',
                crs:"WGS84"
            })
            viewer.addBaseLayer(baseLayer)
        },
        // 单一图片
        addSingleTileImage: (CE: CEType, viewer: Viewer) => {
            const baselayer = CE.ImageryLayerFactory.createSingleTileImageryLayer({
                url: require("./img/tile/world_n.jpg").default,
            })
            viewer.addBaseLayer(baselayer)
        },
    }

    // 地形
    const terrain = {
        // 添加url地形
        addUrlTerrain: (CE: CEType, viewer: Viewer) => {
            // 添加影像图层
            imagery.addAmap(CE, viewer);

            // TODO 注意：地形是透明的，需要加上影像图层才能显示出来
            const terrain = CE.TerrainFactory.createUrlTerrain({
                url: "https://data.marsgis.cn/terrain",
            })
            viewer.addTerrain(terrain);
            viewer.flyToPosition(
                new CE.Position(
                    96.70456483909693,
                    28.883444927447762,
                    48977.26981733466,
                    0,
                    -31
                )
            )
        },
    }

    // layer, 图层
    const layerOfCE = {
        addTilesetLayer: (CE: CEType, viewer: Viewer) =>{
            imagery.addAmap(CE, viewer);

            // @ts-ignore
            let layer = new CE.TilesetLayer('layer')
            viewer.addLayer(layer)
            // @ts-ignore
            const tileset = new CE.Tileset(
                '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
            )
            tileset.setHeight(-420)
            layer.addOverlay(tileset)
            // @ts-ignore
            viewer.flyTo(tileset)
        },
        addGeoJsonLayer: (CE: CEType, viewer: Viewer) => {
            imagery.addAmap(CE, viewer);

            // @ts-ignore
            let layer = new CE.GeoJsonLayer(
                'layer',
                'https://dc.dvgis.cn/examples/data/simplestyles.geojson'
            )
            viewer.addLayer(layer)
            // @ts-ignore
            viewer.flyTo(layer)
        }
    }

    return { onMounted }
}